<template>
    <div>
        <div style="background-color: white">
            <yb-header></yb-header>
            <div class="boxShwotime">
                <div class="show1">
                    <div class="img"></div>
                    <div class="title">油巴盒子</div>
                    <div class="content">
                        您的加油机和世界只差一个盒子的距离<br/>
                        通过油巴盒子，您的加油机将在不影响原有功能正常使用的情况下，增加刷卡加油、无线<br/>
                        数据传输等互联网技术，让您做到千里之外随时掌握每台加油机状况
                    </div>
                    <div class="params">
                        <div style="text-align: center">
                            <div class="sub1 imgsub"></div>
                            <p>无线通信</p>
                            <p>2G+4G</p>
                        </div>
                        <div style="text-align: center">
                            <div class="sub2 imgsub"></div>
                            <p>显示屏</p>
                            <p>LCD液晶</p>
                        </div>
                        <div style="text-align: center">
                            <div class="sub3 imgsub"></div>
                            <p>性能升级</p>
                            <p>ARM STM32</p>
                        </div>
                    </div>
                </div>
                <hr style="width: 896px" />
                <div class="show2">
                    <div class="img"></div>
                    <div class="title">坚固、可靠<br/>
                        十分钟完成改造</div>
                    <div class="content">盒子尺寸为170*53.5*150mm，采用全铝合金外壳，相对传统材料该合金具备高强度、低密度、
                        抗氧化等特点，故始盒子更加坚固、轻便、可靠；广泛用于航空、航天、高速列车、锂离子
                        电池外壳、机械制造、船舶及化学工业中已大量应用，采用铝合金代替钢铁材料，结构重量可
                        减轻50%以上。</div>
                </div>
                <hr style="width: 896px" />
                <div class="show3">
                    <div class="img"></div>
                    <div class="title">强大的小块头</div>
                    <div class="content">控制板根据需求可采用2G或4G无线通信网络，处理器采用ARM STM32系列、LCD液晶屏显
                        示，配置接触式CPU卡读写器，智能化网络化软件控制系统。可视界面友善，系统稳定易上手
                        ，一分钟熟练操作。</div>
                </div>
            </div>
        </div>
        <yb-footer></yb-footer>
    </div>
</template>
<script>
    require('video.js/dist/video-js.css')
    require('vue-video-player/src/custom-theme.css')

    import header from '../packages/header'
    import footer from '../packages/footer.vue'

    export default {
        name: 'hello',
        components: {
            'yb-header': header,
            'yb-footer': footer
        },
    }
</script>
<style lang="less">
    @import "../less/variables";
    .boxShwotime {
        display: flex;
        justify-content: center;
        flex-flow: column;
        align-items: center;
        width: 100%;

        .show1
        {
            display: flex;
            flex-flow: column;
            align-items: center;
            margin: 75px 0 75px 0;
            .img
            {
                .full-img;
                background-image: url("../assets/showtime/box1.jpg");
                width: 491px;
                height: 178px;
                margin-bottom: 50px;
            }
            .title
            {
                font-size: 60px;
                margin-bottom: 50px;
            }
            .content
            {
                .desc-font-size;
                text-align: center;
                margin-bottom: 50px;
            }
            .params
            {
                display: flex;
                justify-content: space-between;
                width: 698px;
                font-size: 14px;
                .imgsub
                {
                    width: 54px;
                    height: 54px;
                    .full-img;
                    margin: 0 auto;

                }
                .sub1{
                    background-image: url("../assets/showtime/box_sub1.png");

                }
                .sub2{
                    background-image: url("../assets/showtime/box_sub2.png");
                }
                .sub3{
                    background-image: url("../assets/showtime/box_sub3.png");
                }
            }
        }

        .show2
        {
            display: flex;
            margin: 75px 0 75px 0;
            flex-flow: column;
            align-items: center;
            .img{
                background-image: url("../assets/showtime/box2.jpg");
                width: 618px;
                height: 565px;
                margin-bottom: 50px;
            }
            .title{
                align-self:flex-start;
                font-size: 40px;
                margin-bottom: 50px;
            }
            .content
            {
                width: 896px;
                .desc-font-size;
            }
        }

        .show3
        {
            margin: 75px 0 75px 0;
            display: flex;
            margin-top: 75px;
            flex-flow: column;
            align-items: center;
            .img{
                background-image: url("../assets/showtime/box3.jpg");
                width: 645px;
                height: 441px;
                margin-bottom: 50px;
            }
            .title{
                align-self:flex-start;
                font-size: 40px;
                margin-bottom: 50px;
            }
            .content
            {
                width: 896px;
                .desc-font-size;
            }
        }
    }

</style>
